import React, { Component } from "react";

class App extends Component {
  state = {
    name: "zhangsan",
    url: "https://www.baidu.com/img/pc_675fe66eab33abff35a2669768c43d95.png",
    show: 1,
    list: [
      {
        name: "zhangsan",
        id: 1,
      },
      {
        name: "lisi",
        id: 2,
      },
    ],
    content: "<h1>hahaha</h1>",
    list2: [1, 2, 3, 4, 5],
  };

  fn() {
    this.setState((prevState) => {
      return {
        show: prevState.show === 1 ? 2 : 1,
      };
    });
  }

  fn2() {
    // this.setState(
    //   (prevState) => {
    //     return {
    //       // list2: prevState.list2.push(6),  ×
    //       // list2: [...prevState.list2, 6],  √
    //       list2: prevState.list2.concat(6), // √
    //     };
    //   },
    //   () => {
    //     console.log(this.state.list2);
    //   }
    // );

    // 如果复杂类型的数据，他的地址没有改变，那么react不会知道你改变了
    // 如果没有使用setState方法，不会有响应式的
    this.state.list2.push(6);
    this.setState({});
  }

  render() {
    return (
      <>
        <h2>state的渲染</h2>
        <p>我的姓名是{this.state.name}</p>
        <img src={this.state.url} alt="" />
        {this.state.show === 1 ? <div>这是第一行</div> : <div>这是第二行</div>}
        <button onClick={this.fn.bind(this)}>btn</button>
        {this.state.list.map((item) => {
          return <p key={item.id}>{item.name}</p>;
        })}
        {/* <div>{this.state.content}</div> */}
        {/* 将内容作为标签进行显示，相当于vue的v-html指令 */}
        <div dangerouslySetInnerHTML={{ __html: this.state.content }}></div>

        <hr />

        <ul>
          {this.state.list2.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.fn2.bind(this)}>btn2</button>
      </>
    );
  }
}

export default App;
